var w = document.body.clientWidth//页面高度
var h = document.body.clientHeight//页面宽度
var arrBalls = []
for(var i = 0;i < 15;i++){  
//定义一个小球
var ball = document.createElement('div')//定义标签
ball.style.zIndex = '10'
ball.style.position = 'absolute'//定位方式
ball.style.left = Math.random()*(w-120)+'px'//left
ball.style.top =  Math.random()*(h-120)+'px'//right
ball.style.borderRadius = '50%'//圆角
// var randomSize = Math.random() * 300//随即大小
// ball.style.width =randomSize + 'px'//宽
// ball.style.height =randomSize + 'px'//高
ball.style.width ='100px'//宽
ball.style.height ='100px'//高
var randomColor = Math.floor(Math.random() * 360)
ball.style.backgroundColor =  'hsl(' + randomColor + ',70%,60%)'//背景色
ball.dataset['directX']= 1
ball.dataset['directY']= 1
document.body.appendChild(ball)//元素加入页面
arrBalls.push(ball)
 }
 
function move(){
  for(var i = 0; i < arrBalls.length;i++){
      var ball = arrBalls[i]
    if(ball.offsetLeft + ball.offsetWidth >=w){//移动到最右 改变方向
      ball.dataset['directX']= -1
    }
    if(ball.offsetLeft<=0){//移动到屏幕最左边的时候 改变方向
       ball.dataset['directX']= 1
    }
    if(ball.offsetTop + ball.offsetHeight >= h){
         ball.dataset['directY']= -1
    }
    if(ball.offsetTop<=0){//移动到屏幕顶部的时候 改变方向
        ball.dataset['directY']= 1
    }

     ball.style.left = ball.offsetLeft + ball.dataset['directX'] * 8 + 'px'//改变小球位置
     ball.style.top = ball.offsetTop +  ball.dataset['directY'] * 5 + 'px'//改变小球位置
     }
    requestAnimationFrame(move)//动画帧调用
}
move()
//重置窗口大小事件
window.onresize = function(){//改变窗口大小之后 重置w和h的值
    w = document.body.clientWidth
    h = document.body.clientHeight
}
